<template>
  <div class="body">
    <el-row class="mb8">
      <el-col :span="19">
        <el-button type="info" @click="shauxin" icon="el-icon-refresh-right"></el-button>
        <el-button type="success" @click="handleAdd" >添加</el-button>
      </el-col>
      <el-col :span="5" class="seach">
        <el-input v-model="params.keyWrod" placeholder="请输入"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="seach"></el-button>
      </el-col>
    </el-row>

    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" class="table"
      @selection-change="handleSelectionChange" height="100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" prop="code" label="编号" width="220" type="index">
          <template slot-scope="scope">
         {{scope.row.code}}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="year" label="时间" width="100" show-overflow-tooltip>
        <!-- <template slot-scope="scope">
          <span v-show="scope.row.createtime == null"></span>
          <span v-show="scope.row.createtime != null">{{ scope.row.createtime | dateFormat }}</span>
        </template> -->
      </el-table-column>
      <!-- <el-table-column align="center" prop="cname" label="公司名称"  show-overflow-tooltip>
      </el-table-column> -->

      <el-table-column align="center" prop="xianjin" label="现金流量表" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button v-show="scope.row.xianjin == null" size="mini" @click="addList(1, scope.row.id,scope.row.year)">添加</el-button>
          <span v-show="scope.row.xianjin != null">已完成</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="lirun" label="利润表" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button v-show="scope.row.lirun == null" size="mini" @click="addList(3, scope.row.id,scope.row.year)">添加</el-button>
          <span v-show="scope.row.lirun !=null ">已完成</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="fuzhai" label="资金负债表" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button v-show="scope.row.fuzhai == null" size="mini" @click="addList(2, scope.row.id,scope.row.year)">添加</el-button>
          <span v-show="scope.row.fuzhai != null">已完成</span>
        </template>
      </el-table-column>
      <el-table-column width="80" align="center" prop="zhizuo" label="创建人" show-overflow-tooltip>
      </el-table-column>
      <!-- <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scope">
          会议状态：1待开会，2进行中，3已完成
          <span v-show="scope.row.status == 1">待开会</span>
                  <span v-show="scope.row.status == 2">进行中</span>
                  <span v-show="scope.row.status == 3">已完成</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="addList(0, scope.row.id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 30]" :page-size="reportListPage.pageSize" :current-page="reportListPage.pageNum"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 添加报告 -->
    <el-dialog title="添加报告" :visible.sync="xopens" width="80%" :close-on-click-modal="false" v-dialogDrag
      custom-class="publicDialog biaoge">
      <div class="wenjianBox">
   <div style="align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 50%;
    justify-content: center;
    " class="container">
  <div class="">
    <span style="height: 50%;
    justify-content: center;" class="demonstration">请选择年份：</span>
    <el-date-picker
      v-model="value3"
      type="year"
         format="yyyy 年"
       value-format="yyyy"
      @change="shijian"
        :picker-options="pickerOptions"
      placeholder="选择年">
    </el-date-picker>
  </div>
      </div>
      </div>
     <div style="justify-content: center;" class="footer">
        <el-button type="" class="btn" @click="savse">提交</el-button>
        <el-button type="" class="btn" @click="xopens=false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加报告" :visible.sync="opens" width="80%" :close-on-click-modal="false" v-dialogDrag
      custom-class="publicDialog biaoge">
      <div class="wenjianBox">
        <!-- 现金流量表 -->
        <cash  v-show="showPage == 2"></cash>
        <!-- 资金负债表 -->
        <liability ref="liability" v-show="showPage == 0"></liability>
        <!--利润表  -->
        <profits v-show="showPage == 1"></profits>
      </div>
      <div class="footer">
        <el-button type="" class="btn" @click="save">提交</el-button>
        <el-button type="" class="btn" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
    <!-- <ExcelCom /> -->
  </div>
</template>

<script>
// import ExcelCom from "@/components/ExcelCom.vue"

import cash from "./cash.vue"; //现金流量表
import liability from "./liability.vue"; //资金负债表
import profits from "./profits.vue"; //利润表
import {yeardetail,addshenji} from "@/api/apply";

import { queryReport, addReport, getReportDetail } from "@/api/shenji";

export default {
  components: {
    cash,
    liability,
    profits,
    // ExcelCom
  },
  data() {
    return {
       pickerOptions: {
           disabledDate(time) {
            // console.log(time)
                    return time.getTime() > Date.now() - 8.64e7 ;
                }
        }, 
      // 不合格原因参数
      total: null,
      total1: null,
      params: {
        page: 1,
        page_limit: 10,
        keyWrod: "",
        id: "",
        status: "", //会议状态：1待开会，2进行中，3已完成
      },
      value3:"",
            current: null,
      current1: null,
      open: false,
      opens: false,
        xopens: false,
      formLabelAlign: {},
      tableDatas: [],
      tableData: [
        {
          star_time: "2022-11-14",
          zjState: "1",
          xjState: "1",
          lrState: "1",
          name: "李某某",
        },
      ],
      formasd: {
        company_id: "", //保函id
        person_id: "", //分配人id
        person_name: "", //分批人姓名
      },
      rules: {},
      form: {
        name: "",
        address: "",
        content: "",
        review_specialist_id: "",
        review_specialist_ids: "",
        star_time: "",
      },
      options1: [], //选择部门
      options2: [], //选择职位
      options3: [], //选择小组
      options4: [], //选择分配人
      multipleSelection: [],
      opendsh: false, //daishenhe
      formData: {
        field126: undefined,
        field127: undefined,
        field128: undefined,
        field136: undefined,
        field137: undefined,
        field138: undefined,
        field139: undefined,
      },
      rules: {
        field126: [
          {
            required: true,
            message: "请输入抵押人：",
            trigger: "blur",
          },
        ],
        field127: [
          {
            required: true,
            message: "请输入出质人：",
            trigger: "blur",
          },
        ],
        field128: [
          {
            required: true,
            message: "请输入反担保人：",
            trigger: "blur",
          },
        ],
        field136: [
          {
            required: true,
            message: "请输入反担保人姓名：",
            trigger: "blur",
          },
        ],
        field137: [
          {
            required: true,
            message: "请输入联系电话：",
            trigger: "blur",
          },
        ],
        field138: [
          {
            required: true,
            message: "请输入身份证号码：",
            trigger: "blur",
          },
        ],
        field139: [
          {
            required: true,
            message: "请输入验证码：",
            trigger: "blur",
          },
        ],
      },
      e: "",
      i: "",
      open_buhege: false,
      params: {
        offset: 0,
        limit: 10,
        keywords: "",
        id: "", //查看详情传会议id
      },
      pay_detail: {},
      kuaidi_detail: {},
      enclosure_detail: {},
      activeIndex: "1",
      steps: 0,
      zjList: "", //专家列表
      openUser: false,
      openDetail: false,
      fileList: "",
      showPage: "",

      reportListPage: {
        // 审计报告列表分页
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    // this.getList()
    this.getQueryReportList();

    // list({
    //   keyWrod: "",
    //   page: "",
    //   page_limit: "",
    //   id: "",
    // }).then((res) => {
    //   console.log(res);
    //   this.zjList = res.data.data;
    // });
  },

  methods: {
    shauxin(){
  this.getQueryReportList();
    },
    // 获取审计报告列表
    getQueryReportList() {
      queryReport(this.reportListPage).then((res) => {
        console.log("@@@@@-----@", res.data);
        // this.reportList = res.data
        this.tableData = res.data.rows
        this.total = res.data.total
        // this.tableData = res.data.rows.map((item, index) => {
        //   return {
        //     id: item.id,
        //     star_time: item.year,
        //     zjState: "1",
        //     xjState: "1",
        //     lrState: "1",
        //     name: item.zhizuo,
        //   };
        // });
      });
    },
    savse(){
      var that=this
       yeardetail({
        year:this.value3
       }).then(res => {
            console.log(res);
         if(res.data.code==1){
          if(res.data.data==1){
             this.$message({
          showClose: true,
          message: '该年份已存在审核报告',
          type: 'warning'
        });
          }else{
            that.addshenjis()
          }
         }else{
  this.$message({
          showClose: true,
          message:res.data.msg,
          type: 'error'
        });
         }
        })
    },
    addshenjis(){
      addshenji({
        year:this.value3
       }).then(res => {
                   if(res.data.code==1){
   this.$message({
          showClose: true,
          message: res.data.msg,
          type: 'success'
        });
        this.xopens=false
        this.getQueryReportList()
         }else{
  this.$message({
          showClose: true,
          message:res.data.msg,
          type: 'error'
        });
         }
         
        })
    },
shijian(e){
 
  
  // this.value3=e+"年"
console.log(e)
},
    // 添加审计报告
    addList(num, id,shi) {
      this.$router.push({
        path: "/finance/detail",
        query: {
          state: num,
          id: id,
          year:shi
        },
      });
    },

    // 获取专家列表
    // getList() {
    //     appraisalList({ ...this.params }).then(res => {
    //         console.log(res);
    //         this.tableData = res.data.data
    //         this.total = res.data.total
    //     })
    // },
    // tabs 切换
    companylist(status) {
      // this.params.keywords = ''
      // this.params.page = 1
      // this.params.page_limit = 10
      this.showPage = status;
      // if (status == 0) {
      //     this.params.status = ''
      // } else {
      //     this.params.status = status
      // }
      // this.getList()
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.reportListPage.pageSize = val;
      // this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.reportListPage.pageNum = val;
      // this.getList();
    },
    // 搜索
    seach() {
      this.params.page = 1;
      this.params.page_limit = 10;
      // this.getList();
    },
    // 取消
    cancel() {
      this.opens = false;
      // this.reset();
    },
    // 添加
    handleAdd() {
      this.xopens = true;
    },
    // 提交表单
    save() {
 this.$refs.liability.parentHandleclick("嘿嘿嘿");

      return
      this.form.review_specialist_ids =
        this.form.review_specialist_ids.join(",");
      this.form.star_time = this.formats(this.form.star_time);
      appraisalAdd({ ...this.form }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          this.opens = false;
          this.getList();
          this.$message({
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
          });
        }
      });
    },

    // 参会人员
    see(val) {
      this.userList = val.sp_list;
      this.openUser = true;
    },
    handleSelectionChange() { },
    // 查看资料
    handleDelete(val) {
      this.openDetail = true;
      this.params.id = val.id;
      meetingList({
        review_appraisal_id: val.id,
        keyWrod: "",
        page: "",
        page_limit: "",
        id: "",
      }).then((res) => {
        console.log(res);
        this.fileList = res.data.data;
      });
    },
    formats(value) {
      if (value == 0) {
        return "";
      }
      let date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s; //多种时间格式的拼接
    },

    yulan(e) {
      let link = document.createElement("a");
      link.style.display = "none";
      link.style.download = "";
      link.target = "_blank";
      link.href = e + "";
      // link.setAttribute("download", ".pdf");
      // +'.pdf' 通过不同的后缀名下载不同的文件
      //这里下载的是pdf格式的文件，拿到接口里的res也必须是pdf的文件流
      // document.body.appendChild(link);
      link.click();
      URL.revokeObjectURL(link.href); //URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。
      document.body.removeChild(link);
    },
    async xiazai(e) {
      const a = document.createElement("a");
      //   let url = baseUrl + binding.value // 若是不完整的url则需要拼接baseURL
      const url = e; // 完整的url则直接使用
      // 这里是将url转成blob地址，
      fetch(url)
        .then((res) => res.blob())
        .then((blob) => {
          // 将链接地址字符内容转变成blob地址
          a.href = URL.createObjectURL(blob);
          console.log(a.href);
          a.download = binding.value.name || ""; // 下载文件的名字
          // a.download = url.split('/')[url.split('/').length -1] //  // 下载文件的名字
          document.body.appendChild(a);
          a.click();

          //在资源下载完成后 清除 占用的缓存资源
          window.URL.revokeObjectURL(a.href);
          document.body.removeChild(a);
          return;
          this.xiazpdf(url);
        });
    },
    xiazpdf(e) {
      var that = this;
      // res.data   就是后台返回的base64的 文件流
      let URL = this.dataURLtoBlob(e);
      var reader = new FileReader();
      reader.readAsDataURL(URL);
      reader.onload = function (e) {
        // 兼容IE
        if (window.navigator.msSaveOrOpenBlob) {
          var bstr = atob(e.target.result.split(",")[1]);
          var n = bstr.length;
          var u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          var blob = new Blob([u8arr]);

          window.navigator.msSaveOrOpenBlob(blob, that.wenname);
        } else {
          // 转换完成，创建一个a标签用于下载
          var a = document.createElement("a");
          a.download = that.wenname;
          a.href = e.target.result;
          a.setAttribute("id", "export");
          document.getElementById("purchaseManage").append(a); // 修复firefox中无法触发click
          a.click();
          document.getElementById("export").remove();
        }
      };
    },
    dataURLtoBlob(dataurl) {
      var bstr = atob(dataurl);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: "pdf" });
    },
  },
};
</script>

<style scoped lang="scss">
.showphoto {
  margin-bottom: 30px;
}

.body {
  height: calc(90vh - 60px);
  display: flex;
  flex-direction: column;
}

.agreement {
  margin-bottom: 30px;
}

.froms {
  margin: 0 auto;
}

.table {
  width: 100%;
  // margin-top: 10px;
}

::deep .el-dialog {
  margin-top: 5vh !important;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding-top: 0 !important;
  padding-bottom: 10px;
}

/* element.style{
  flex-wrap: wrap;
} */
.EP_pdf_box {
  width: 335px;
  height: 140px;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 16%);
  border-radius: 4px 4px 4px 4px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.EP_PDF_IMG_LEFT {
  display: flex;
  /* justify-content: center; */
  align-items: center;
}

.yesform {
  flex: 1;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.button_details {
  width: 100%;
  display: flex;
  justify-content: center;
}

.casd {
  flex: 1;
}

.el-menu--horizontal>.el-menu-item {
  height: 40px;
  line-height: 40px;
}

.el-menu.el-menu--horizontal {
  margin-bottom: 8px;
}

.publicDialog .user {
  flex: 1;
  overflow-y: auto;
  padding: 0 10%;
  display: flex;
  font-size: 16px;

  span {
    margin-right: 8px;
    color: #333;
  }
}

.wenjianBox {
  flex: 1;
  overflow-y: auto;
  padding: 0 5%;
}

.wenjian {
  width: 33%;
  height: 130px;
  box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 16%);
  background-color: #fff;
  padding: 10px;

  div {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    img {
      width: 60px;
      height: 60px;
      margin-right: 15px;
    }

    .el-button {
      width: 100px;
      height: 40px;
    }
  }
}

.publicDialog {
  height: 800px !important;
}
</style>

